<template>
  <div class="card" style="display: flex; height:100%; width:50%; margin:0 auto;">
    <div style="margin-left:20px; padding:20px 20px; font-size:large; font-weight:bolder">用户信息</div>
    <div style="padding:20px 30px">
      <div class="info-item" style="margin-top:40px;">
        <span class="label">头像：</span>
        <el-image
            v-if="user.avatar"
            :src="user.avatar"
            style="width:80px; height:80px; border-radius:50%"
            fit="cover"
        />
        <span v-else style="color:#999">未设置头像</span>
      </div>
      <div class="info-item" style="margin-top:40px;">
        <span class="label">昵称：</span>
        <span class="value">{{ user.name || '未设置' }}</span>
      </div>
      <div class="info-item" v-if="user.sex" style="margin-top:40px;">
        <span class="label">性别：</span>
        <span class="value">
          <el-tag :type="user.sex === '男' ? 'primary' : 'danger'" size="small">
            {{ user.sex }}
          </el-tag>
        </span>
      </div>
      <div class="info-item" style="margin-top:40px;">
        <span class="label">电话：</span>
        <span class="value">{{ user.phone || '未设置' }}</span>
      </div>
      <div class="info-item" style="margin-top:40px;">
        <span class="label">电子邮箱：</span>
        <span class="value">{{ user.email || '未设置' }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request.js'
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const route = useRoute()
const user = ref({}) // 用户信息对象

// 根据ID获取用户详情
const loadUserData = async () => {
  try {
    const res = await request.get(`/user/selectById/${route.params.userId}`) // 根据实际API调整
    user.value = res.data
  } catch (error) {
    ElMessage.error('用户信息获取失败')
  }
}

onMounted(() => {
  if (!route.params.userId) { // 参数校验
    ElMessage.error('无效的用户ID')
    return router.back()
  }
  loadUserData()
})
</script>

<style scoped>
.info-item {
  margin:15px 0;
  display: flex;
  align-items: center;
  gap:20px;
}
.label {
  width:80px;
  text-align: right;
  color:#606266;
}
.value {
  flex:1;
}
</style>